<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <!--        第一个card-->
        <el-card>
          <Detail title="总销售额" count="￥ 10000">
            <template slot="charts">
              <span>周同比&nbsp;&nbsp;56.67%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <svg t="1653009448616" class="icon1" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="4710" width="30" height="30"
              ><path
                d="M255.998 488.11h167.253l0.909 322.563h166.4v-322.56l167.253 0.455L506.819 165.61l-250.821 322.5z"
                fill="#1296DB" p-id="4711"
              ></path></svg>
              </span>
              <span>日同比&nbsp;&nbsp;19.95%
              <svg t="1653009530548" class="icon2" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5387" width="30" height="30"
              ><path
                d="M768.002 535.89H600.749l-0.909-322.563h-166.4v322.56l-167.253-0.455L517.181 858.39l250.821-322.5z"
                fill="#FD3333" p-id="5388"
              ></path></svg>
              </span>
            </template>
            <template slot="footer">
              <span>日销售额1234</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" count="88460">
            <template slot="charts">
              <linkcharts></linkcharts>
            </template>
            <template slot="footer">
              <span>日访问量 1234</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" count="88460">
            <template slot="charts">
              <barcharts></barcharts>
            </template>
            <template slot="footer">
              <span>转化率 64%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" count="80%">
            <template slot="charts">
              <zhucharts></zhucharts>
            </template>
            <template slot="footer">
                            <span>周同比&nbsp;&nbsp;56.67%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <svg t="1653009448616" class="icon1" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="4710" width="30" height="30"
              ><path
                d="M255.998 488.11h167.253l0.909 322.563h166.4v-322.56l167.253 0.455L506.819 165.61l-250.821 322.5z"
                fill="#1296DB" p-id="4711"
              ></path></svg>
              </span>
              <span>日同比&nbsp;&nbsp;19.95%
              <svg t="1653009530548" class="icon2" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5387" width="30" height="30"
              ><path
                d="M768.002 535.89H600.749l-0.909-322.563h-166.4v322.56l-167.253-0.455L517.181 858.39l250.821-322.5z"
                fill="#FD3333" p-id="5388"
              ></path></svg>
              </span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from './Detail'
import linkcharts from './linecharts'
import barcharts from './barcharts'
import zhucharts from './zhucharts'

export default {
  name: 'Index',
  components: {
    Detail,
    linkcharts,
    barcharts,
    zhucharts
  }
}
</script>

<style scoped>

</style>
